<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue'

interface rank {
    id: number,
    name: string,
    progress: string,
    score: number,
    rank: number
}

interface rankType {
    ranklist: rank[],
    bgColor: String
}

// 接收父组件传递数据
const props = withDefaults(defineProps<rankType>(), {
    ranklist: () => [],
    bgColor: () => '#ffffff'

})


let bgColorBody = props.bgColor
</script>
    
<template>
    <div class="wrapper">
        <table class="c-table">
            <thead class="c-table__header">
                <tr>
                    <th></th>
                    <th class="c-table__col-label">姓名</th>
                    <th class="c-table__col-label">进度</th>
                    <th class="c-table__col-label">得分</th>
                    <th class="c-table__col-label">排名</th>
                </tr>
            </thead>
            <tbody class="c-table__body">
                <tr v-for="item in props.ranklist" :key="item.id" class="animate__animated animate__fadeInDown">
                    <td>
                        <img src="https://codelover.club/stutasks/userID_58/currNo_11/资源/FqJ7N4sh4Mhgd5Y4Lp5YA1Nf2hnH.png"
                            alt="">
                    </td>
                    <td class="c-table__cell">{{ item.name }}</td>
                    <td class="c-table__cell">{{ item.progress }}</td>
                    <td class="c-table__cell">{{ item.score }}</td>
                    <td class="c-table__cell" v-if="item.rank === 1">
                        <img src="/course/one.svg" alt="">
                    </td>
                    <td class="c-table__cell" v-else-if="item.rank === 2">
                        <img src="/course/two.svg" alt="">
                    </td>
                    <td class="c-table__cell" v-else-if="item.rank === 3">
                        <img src="/course/three.svg" alt="">
                    </td>

                    <td class="c-table__cell" v-else>{{ item.rank }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
    
<style scoped lang="scss">
.wrapper {
    // margin: 24px 180px;
}



/* Table styles */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td {
    color: #7a7e90;
    font-size: 15px;

}

td,
th {
    padding: 5px;
    text-align: left;
}

td:first-of-type {
    padding-left: 36px;
    width: 66px;
}

.c-table {
    background-color: v-bind(bgColorBody);
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 24px;
    width: 100%;
}

.c-table__cell {
    padding: 12px 6px 12px 12px;
    word-wrap: break-word;

    img {
        transform: translateX(-18px);
    }
}

.c-table__header tr {
    color: #fff;
}

.c-table__header th {
    background-color: #716eb6;
    background-color: $theme-color;
    padding: 18px 6px 18px 12px;
}

// .c-table__header th:first-child {
//     border-top-left-radius: 4px;
// }

// .c-table__header th:last-child {
//     border-top-right-radius: 4px;
// }

.c-table__body tr {
    border-bottom: 1px solid rgba(113, 110, 182, 0.15);
}

.c-table__body tr:last-child {
    border-bottom: none;
}

.c-table__body tr:hover {
    background-color: rgba(113, 110, 182, 0.15);
    color: #272b37;
}

.c-table__label {
    display: none;
}

img {
    display: block;
    width: 40px;
    height: 40px;
}
</style>